import { lazy } from 'react'
import { RouteObject } from 'react-router-dom'

const Basic = lazy(() => import('layouts/Baisc'))
const Login = lazy(() => import('views/login/index'))
const Home = lazy(() => import('views/home/index'))
const City = lazy(() => import('views/city/index'))
const Classify = lazy(() => import('views/classify/index'))
const Cart = lazy(() => import('views/cart/index'))
const Mine = lazy(() => import('views/mine/index'))
const Tab = lazy(() => import('views/tab/index'))
const Demo = lazy(() => import('views/demo/index'))
const Detail = lazy(() => import('views/detail/index'))
const Collect = lazy(() => import('views/collect/index'))

const routes: RouteObject[] = [
  {
    path: '/detail/:id',
    element: <Detail />,
  },
  {
    path: '/collect',
    element: <Collect />,
  },
  {
    path: '/basic',
    element: <Basic />,
    children: [
      {
        path: 'demo',
        element: <Demo />,
      },

      {
        path: 'home',
        element: <Home />,
      },
      {
        path: 'classify',
        element: <Classify />,
      },
      {
        path: 'cart',
        element: <Cart />,
      },
      {
        path: 'mine',
        element: <Mine />,
      },
    ],
  },
  {
    path: '/tab',
    element: <Tab />,
  },
  {
    path: '/city',
    element: <City />,
  },
  {
    path: '/',
    element: <Login />,
  },
]

export { routes }
